<template>
    <div id="classify">
        <div class="mytop">
            <svg class="icon" aria-hidden="true" @click="go">
                <use xlink:href="#icon-shangchuanicon-fuben"></use>
            </svg>
            <p>分类</p>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-sousuo"></use>
            </svg>
        </div>
        <div class="con">
            <mt-navbar v-model="selected">
                <div class="list">
                    <mt-tab-item id="1"><p>新品</p></mt-tab-item>
                    <mt-tab-item id="2"><p>众筹</p></mt-tab-item>
                    <mt-tab-item id="3"><p>小米手机</p></mt-tab-item>
                    <mt-tab-item id="4"><p>Redmi</p></mt-tab-item>
                    <mt-tab-item id="5"><p>黑鲨</p></mt-tab-item>
                    <mt-tab-item id="6"><p>5G合约</p></mt-tab-item>
                    <mt-tab-item id="7"><p>米粉卡</p></mt-tab-item>
                    <mt-tab-item id="8"><p>手机配件</p></mt-tab-item>
                    <mt-tab-item id="9"><p>电视</p></mt-tab-item> 
                    <mt-tab-item id="10"><p>大家电</p></mt-tab-item>
                    <mt-tab-item id="11"><p>电脑办公</p></mt-tab-item>
                    <mt-tab-item id="12"><p>小爱智能</p></mt-tab-item> 
                    <mt-tab-item id="13"><p>路由器</p></mt-tab-item>
                    <mt-tab-item id="14"><p>生活电器</p></mt-tab-item>
                    <mt-tab-item id="15"><p>厨房电器</p></mt-tab-item> 
                    <mt-tab-item id="16"><p>智能穿戴</p></mt-tab-item>
                </div>
            </mt-navbar>

            <!-- tab-container -->
            <mt-tab-container v-model="selected">
            <mt-tab-container-item id="1">
                <img src="../../assets/img/classify/11.webp" alt="" width="100%">
                <div class="aa">
                    <div class="title">手机</div>
                    <div class="conbox" v-for="(v,i) in phone">
                        <img :src="v.pic" alt="">
                        <p>{{v.txt}}</p>
                    </div>
                    <div class="title">智能</div>
                    <div class="conbox" v-for="(v,i) in AI">
                        <img :src="v.pic" alt="">
                        <p>{{v.txt}}</p>
                    </div>
                     <div class="title">家电</div>
                    <div class="conbox" v-for="(v,i) in elec">
                        <img :src="v.pic" alt="">
                        <p>{{v.txt}}</p>
                    </div>
                </div>
            </mt-tab-container-item>
            <mt-tab-container-item id="2">
                <div>
                    <img src="../../assets/img/classify/21.webp" alt="" width="100%">
                    <div class="title">众筹好物</div>
                    <div class="conbox" v-for="(v,i) in crowdfunding">
                        <img :src="v.pic" alt="">
                        <p>{{v.txt}}</p>
                    </div>
                </div>
            </mt-tab-container-item>
            <mt-tab-container-item id="3">
                <img src="../../assets/img/classify/31.webp" alt="" width="100%">
                <div>
                    <div class="title">小米数字系列</div>
                    <div class="conbox" v-for="(v,i) in minum">
                        <img :src="v.pic" alt="">
                        <p>{{v.txt}}</p>
                    </div>
                    <div class="title">小米cc系列</div>
                    <div class="conbox" v-for="(v,i) in micc">
                        <img :src="v.pic" alt="">
                        <p>{{v.txt}}</p>
                    </div>
                </div>
            </mt-tab-container-item>
            <mt-tab-container-item id="4">
                <img src="../../assets/img/classify/11.webp" alt="" width="100%">
                <div class="aa">
                    <div class="title">手机</div>
                    <div class="conbox" v-for="(v,i) in phone">
                        <img :src="v.pic" alt="">
                        <p>{{v.txt}}</p>
                    </div>
                    <div class="title">智能</div>
                    <div class="conbox" v-for="(v,i) in AI">
                        <img :src="v.pic" alt="">
                        <p>{{v.txt}}</p>
                    </div>
                     <div class="title">家电</div>
                    <div class="conbox" v-for="(v,i) in elec">
                        <img :src="v.pic" alt="">
                        <p>{{v.txt}}</p>
                    </div>
                </div>
            </mt-tab-container-item>
             </mt-tab-container-item>
            <mt-tab-container-item id="5">
                <div>
                    <img src="../../assets/img/classify/21.webp" alt="" width="100%">
                    <div class="title">众筹好物</div>
                    <div class="conbox" v-for="(v,i) in crowdfunding">
                        <img :src="v.pic" alt="">
                        <p>{{v.txt}}</p>
                    </div>
                </div>
            </mt-tab-container-item>
            <mt-tab-container-item id="6">
                <img src="../../assets/img/classify/31.webp" alt="" width="100%">
                <div>
                    <div class="title">小米数字系列</div>
                    <div class="conbox" v-for="(v,i) in minum">
                        <img :src="v.pic" alt="">
                        <p>{{v.txt}}</p>
                    </div>
                    <div class="title">小米cc系列</div>
                    <div class="conbox" v-for="(v,i) in micc">
                        <img :src="v.pic" alt="">
                        <p>{{v.txt}}</p>
                    </div>
                </div>
            </mt-tab-container-item>
            </mt-tab-container>
        </div>



        <!-- 底部 -->
        <div class="bottombox"></div>
    </div>
    
</template>
<script src="../../assets/js/iconfont.js"></script>
<script>
export default {
    data(){
        return{
            selected:"1",
            phone:[],
            AI:[],
            elec:[],
            crowdfunding:[],
            minum:[],
            micc:[]
        }
    },
     mounted(){
        var _this=this;
        this.$http.get('./data/classify.json')
        .then(function (response){
            console.log(response);
            _this.phone=response.data.phone;
            _this.AI=response.data.AI;
            _this.elec=response.data.elec;
            _this.crowdfunding=response.data.crowdfunding;
            _this.minum=response.data.minum;
            _this.micc=response.data.micc;
        })
        .catch(function(error){
            console.log(error);
        })
    },
    methods:{
        go(){
            this.$router.go(-1);
        }
    }
}
</script>
<style lang="less" scoped>
    .icon {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
        padding: 0 10px;
        }
     .mytop{
        z-index: 5;
        background: #f2f2f2;
        position: fixed;
        left: 0px;
        right: 0px;
        top: 0;
        padding: 10px 0;
        display: flex;
        justify-content: space-between;
    }
     .list{
        height: 520px;
    }
     .con{
        display: flex;
        margin-top: 30px;
    }
    .mint-navbar{
        position: fixed;
        left: 0px;
        display: block;
        width: 22%;
        overflow: auto;
    }
    .mint-tab-item{
        display: block;
        background-color: #f3f4f5;
    }
    .mint-tab-container{
        width: 78%;
        margin-left: 22%;
        padding: 0 5%;
        background: white;
        box-sizing: border-box;
    }
    .mint-navbar .mint-tab-item.is-selected{
        border-bottom: none;
    }
    .mint-navbar .mint-tab-item.is-selected p{
        font-size: 17px;
        color: tomato;
    }
    .con .title{
        margin-top: 10px;
        line-height: 66px;
        align-items: center;
    }
    .conbox{
        width: 33.33333333336%;
        float: left;
        font-size: 12px;
        margin-top: .2rem;
        margin-bottom: .3rem;
        overflow: hidden;
    }
    .conbox img{
        width: 80%;
        margin-bottom: .28rem;
    }
    .conbox p{
        margin: 10px 0;
        color: rgba(0,0, 0, 0.54);
    }
    .bottombox{
        width: 100%;
        height: 100px;
    }
</style>